﻿@** Copyright 2012 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*@

@using Nop.Core;
@using Nop.Core.Infrastructure;

@using System.Globalization
@model SevenSpikes.Nop.Plugins.JCarousel.Models.JCarouselModel
@if (Model.Items.Count > 0)
{
    Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.JCarousel/Themes/" + Model.Theme + "/JCarousel.css");

    bool supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
    if (supportRtl)
    {
        Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.JCarousel/Themes/" + Model.Theme + "/JCarousel.rtl.css");
    }


    Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.JCarousel/Scripts/jquery.jcarousel.min.js");
    Html.AppendScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.JCarousel/Scripts/jquery.touchSwipe.min.js");

    Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.JCarousel/Scripts/jquery.disable.text.select.js");

    var vertical = "";
    if (Model.Settings.CarouselOrientation == true)
    {

        vertical = "vertical-holder";

    }

    var carouselHtmlElementId = Model.Settings.CarouselHtmlElementId;

    string animationSpeed;
    string easing;
    string wrap;

    if (Model.Settings.AnimationSpeed == "none")
    {
        animationSpeed = "0";
    }
    else
    {
        animationSpeed = "'" + @Model.Settings.AnimationSpeed + "'";
    }

    if (Model.Settings.Easing == "none")
    {
        easing = null;
    }
    else
    {
        easing = ", easing: '" + @Model.Settings.Easing + "'";
    }

    if (Model.Settings.WrapItems == "none")
    {
        wrap = null;
    }
    else
    {
        wrap = ", wrap: '" + @Model.Settings.WrapItems + "'";
    }

    if (Model.Settings.WrapItems == "circular" && Model.Settings.Autoscroll > 0 && Model.Items.Count <= Model.Settings.NumberOfVisibleItems)
    {
        Model.Settings.Autoscroll = 0;
        wrap = null;
    }

    var visibleItems = string.Empty;

    var numberOfVisibleItems = Model.Settings.NumberOfVisibleItems;

    if (numberOfVisibleItems > 0)
    {
        // in order to prevent js errors set the number of visible items to be the count of all product items from the model,
        // if the model contains less products than the numberOfVisibleItems
        if (Model.Items.Count < numberOfVisibleItems)
        {
            numberOfVisibleItems = Model.Items.Count;
        }
        visibleItems = string.Format("visible:{0},", numberOfVisibleItems);
    }
    
    <script type="text/javascript">
        jQuery(document).ready(function () {
            var carouselID = '#@carouselHtmlElementId';
            
            var mycarousel_initCallback = function(carousel)
            {
                //Enable swiping...
                $(carouselID).parent().swipe({
                    tap:function(event, target) {
                        window.open($(target).closest('.item-picture').find('.thumb-img').attr('href'), '_self');
                    },
                    swipeLeft: function() { carousel.next(); },
                    swipeRight: function() { carousel.prev(); },
                    swipeMoving: function() {},
                    fingers:'all',
                    excludedElements:"button, input, select, textarea"
                });
            };

            jQuery(carouselID).jcarousel({
                initCallback: mycarousel_initCallback,
                setupCallback: function(carousel) {
                    carousel.reload();
                },
                reloadCallback: function(carousel) {
                    if(carousel.options.vertical == false)
                    {
                        var num = 1;
                    
                        // Set the width of the JCarousel item
                        var itemWidth = @Model.GeneralSettings.JCarouselItemMinWidth;
                    
                        if (carousel.clipping() > itemWidth) {
                            num = Math.floor(carousel.clipping() / itemWidth);
                        }
                      
                        if (@numberOfVisibleItems > num) {
                            carousel.options.visible = num;
                            carousel.options.scroll = num;
                        }    else {
                            carousel.options.visible = @numberOfVisibleItems;
                        }
                    }
                },
                vertical: @Model.Settings.CarouselOrientation.ToString(CultureInfo.InvariantCulture).ToLower(),
                rtl: @supportRtl.ToString(CultureInfo.InvariantCulture).ToLower(),
                start: @Model.Settings.StartIndex,
                @if (!string.IsNullOrEmpty(visibleItems))
                {
                    @Html.Raw(visibleItems)
                }
                scroll: @Model.Settings.ScrollItems,
                animation: @Html.Raw(animationSpeed),
                auto: @Model.Settings.Autoscroll,
                size: @Model.Items.Count
                @if (!String.IsNullOrEmpty(easing))
                {
                    @Html.Raw(easing)
                }
                @if (!String.IsNullOrEmpty(wrap))
                {
                    @Html.Raw(wrap)
                }
                });
            
            $(".jcarousel-prev, .jcarousel-next").disableTextSelect();
        });
    </script>
   
    <div class="@carouselHtmlElementId @Model.Settings.Skin">
        <div class="nop-jcarousel @vertical">
            @if (!String.IsNullOrEmpty(Model.Settings.Title) && Model.Settings.ShowTitle)
            {
                if (Model.Settings.CarouselOrientation)
                {
                <h2 class="carousel-title vertical"><span>@Model.Settings.Title</span></h2>
                }
                else
                {
                <h2 class="carousel-title"><span>@Model.Settings.Title</span></h2>
                }
            }
            <ul id="@carouselHtmlElementId">
                @foreach (var item in Model.Items)
                {           
                    <li>
                        <div class="item-holder">
                            <div class="item-picture">
                                <a class="thumb-img" href="@item.Url" title="@item.PictureModel.Title">
                                    <img alt="@item.PictureModel.AlternateText" src="@item.PictureModel.ImageUrl" title="@item.PictureModel.Title" />
                                </a>
                            </div>
                            <div class="item-info">
                                @if (Model.Settings.ShowItemsName)
                                {
                                    <h3 class="jcarousel-product-title">
                                        <a class="jcarousel-product-name" href="@item.Url" title="@item.PictureModel.Title">
                                            @item.Name </a>
                                    </h3>
                                }
                                @if (Model.Settings.ShowShortDescription)
                                {
                                    <p class="short-description">@item.ShortDescription</p>
                                }
                                @if (Model.Settings.ShowProdictsPrice)
                                {
                                    <div class="prices">
                                        @if (Model.Settings.ShowProdictsOldPrice)
                                        { 
                                            <span class="price old-price">@item.ProductPriceModel.OldPrice</span>
                                        }
                                        <span class="price actual-price">@item.ProductPriceModel.Price</span>
                                    </div>
                                }
                                @if (Model.Settings.ShowDetailsButton)
                                {
                                    <a class="button" href="@item.Url">@T("SevenSpikes.JCarousel.Admin.DetailsButton")</a>
                                }
                            </div>
                        </div>
                    </li>
                }
            </ul>
        </div>
    </div>

@* 
    NOTE: DO NOT MOVE THIS CODE. IF IT IS PLASED ELSEWHERE IT WILL NOT WORK.
*@
    
    <script type="text/javascript">

        jQuery(document).ready(function() {
            var carouselElementClass = ".@carouselHtmlElementId";
            var carouselID = "#@carouselHtmlElementId";
            var carousel = jQuery(carouselID).data('jcarousel');

            if (@Model.Settings.Autoscroll > 0) {
                $(carouselElementClass).hover(function() {
                    carousel.stopAuto();
                }, function () {
                    carousel.startAuto();
                });
            }
        });
    </script>
                
}